<template>
  <view :data-theme="theme()" :class="theme() || ''">
    <view class="refund-apply pb100">
      <form @reset="formReset">
        <view class="one-product d-s-c p30 bg-white">
          <view class="cover">
            <image :src="product.productImage" mode="aspectFit"></image>
          </view>
          <view class="flex-1">
            <view class="pro-info">{{ product.productName }}</view>
            <view class="pt10 p-0-30 f24 gray9">
              <text class=""> {{$t('order.unit_price')}}HK${{ product.linePrice }} </text>
              <text class="ml20"> {{$t('order.quantity')}}{{ product.totalNum }} </text>
            </view>
          </view>
        </view>

        <!-- 服务类型 -->
        <view
          class="group bg-white"
          v-if="product && product.orderM && product.orderM.deliveryType != 30"
        >
          <view class="group-hd border-b-e">
            <view class="left">
              <text class="min-name">{{$t('order.service_type')}}</text>
            </view>
          </view>
          <view class="d-s-c p-20-0">
            <button
              v-if="product.orderM && product.orderM.deliveryType != 30"
              type="default"
              :class="type == 10 ? 'btn-red-border' : ''"
              @click="tabType(10)"
            >
              {{$t('order.return')}}/{{$t('order.refund')}}
            </button>
            <button
              v-if="product.orderM && product.orderM.deliveryType != 30"
              type="default"
              :class="type == 20 ? 'ml20 btn-red-border' : 'ml20'"
              @click="tabType(20)"
            >
              {{$t('order.exchange')}}
            </button>
            <button
              v-if="product.orderM && product.orderM.deliveryType != 30"
              type="default"
              :class="type == 30 ? 'ml20 btn-red-border' : 'ml20'"
              @click="tabType(30)"
            >
              {{$t('order.refund_only')}}
            </button>
          </view>
        </view>

        <!--{{$t('order.reason')}}-->
        <view class="group bg-white">
          <view class="group-hd">
            <view class="left">
              <text class="min-name">{{$t('order.reason')}}</text>
            </view>
          </view>
          <view class="d-s-c">
            <textarea
              class="p10 box-s-b border flex-1 f28 lh150"
              v-model="form.content"
              :placeholder="$t('order.reason_detail_tip')"
            />
          </view>
        </view>

        <!--{{$t('order.refund_amount')}}-->
        <view class="group bg-white" v-if="type == 10 || type == 30">
          <view class="group-hd">
            <view class="left">
              <text class="min-name">{{$t('order.refund_amount_label')}}</text>
              <text class="red f30">HK${{ product.totalPayPrice }}</text>
            </view>
          </view>
        </view>

        <!--{{$t('order.upload_image')}}-->
        <view class="group bg-white">
          <view class="group-hd">
            <view class="left">
              <text class="min-name">{{$t('order.upload_proof')}}</text>
              <text class="gray9">({{$t('order.max_upload',{place1:6})}})</text>
            </view>
          </view>
          <view class="upload-list d-s-c">
            <view
              class="item"
              v-for="(imgs, img_num) in images"
              :key="img_num"
              @click="deleteFunc(imgs)"
            >
              <image :src="imgs.filePath" mode="aspectFit"></image>
            </view>
            <view class="item d-c-c d-stretch" v-if="images.length < 6">
              <view class="upload-btn d-c-c d-c flex-1" @click="openUpload()">
                <text class="icon iconfont icon-xiangji f34"></text>
                <text class="gray9">{{$t('order.upload_image')}}</text>
              </view>
            </view>
          </view>
        </view>

        <view class="foot-btns">
          <!-- #ifdef H5 -->
          <template v-if="isWeixin() && mpState == 1 && temlIds != ''">
            <wx-open-subscribe
              :template="temlIds"
              id="subscribe-btn"
              @success="subscribeSuccess"
              @error="subscribeFail"
            >
              <div v-is="'script'" type="text/wxtag-template" slot="style">
                <div v-is="'style'">
                  #subscribe-btn{ width: 100%; } .subscribe-btn{ border: 1px
                  solid #f6220c; background: #f6220c; color: #fff;
                  border-radius:5px; float: right; }
                </div>
              </div>
              <div v-is="'script'" type="text/wxtag-template">
                <div
                  class="subscribe-btn"
                  :style="{
                    width: btnAtrrpx.width + 'px',
                    height: btnAtrrpx.height + 'px',
                    lineHeight: btnAtrrpx.height + 'px',
                    paddingLeft: btnAtrrpx.paddingLeft + 'px',
                    paddingRight: btnAtrrpx.paddingLeft + 'px',
                    fontSize: btnAtrrpx.fontSize + 'px',
                  }"
                >
                  {{$t('order.submit_review')}}
                </div>
              </div>
            </wx-open-subscribe>
          </template>
          <template v-else>
            <view class="bottom-btn" @click="submit">
              <button type="default" @click="formSubmit">{{$t('order.submit_review')}}</button>
            </view>
          </template>
          <!-- #endif -->
          <!-- #ifndef H5 -->
          <button class="btn-red" @click="formSubmit">{{$t('order.submit_review')}}</button>
          <!-- #endif -->
        </view>
      </form>
      <!--{{$t('order.upload_image')}}-->
      <Upload v-if="isUpload" @getImgs="getImgsFunc"></Upload>
    </view>
  </view>
</template>

<script>
import Upload from "@/components/upload/upload.vue";
export default {
  components: {
    Upload,
  },
  data() {
    return {
      /*是否加载完成*/
      loadding: true,
      indicatorDots: true,
      autoplay: true,
      interval: 2000,
      duration: 500,
      type: 10,
      /*是否打开上传图片*/
      isUpload: false,
      /*订单商品id*/
      orderProductId: 0,
      /*订单商品*/
      product: {},
      images: [],
      /*小程序订阅消息*/
      temlIds: [],
      url: "",
      btnAtrrpx: {},
      form: {},
      // 1 公众号登录
      mpState: null,
    };
  },
  onLoad(e) {
    let mpState = uni.getStorageSync("mpState");
    this.mpState = mpState;
    this.orderProductId = e.orderProductId;
  },
  onShow(){
    	uni.setNavigationBarTitle({
			title: this.$t('order.request_after_sales')
		})
  },
  mounted() {
    /*获取订单详情*/
    this.getData();
    if (this.isWeixin()) {
      this.url = window.location.href;
      this.getBtnInfo();
      this.getTemplateId();
    }
  },
  methods: {
    subscribeSuccess() {
      this.formSubmit();
      console.log("调用成功");
    },
    subscribeFail() {
      this.formSubmit();
      console.log("调用失败");
    },
    getBtnInfo() {
      let self = this;
      let btnAtrrpx = {
        width: 130,
        height: 70,
        paddingLeft: 28,
        fontSize: 28,
      };
      uni.getSystemInfo({
        success: function (res) {
          let scale = res.screenWidth / 750;
          let newObj = {};
          for (let key in btnAtrrpx) {
            newObj[key] = btnAtrrpx[key] * scale;
          }
          self.btnAtrrpx = newObj;
        },
        fail() {
          self.btnAtrrpx = btnAtrrpx;
        },
      });
    },
    getTemplateId() {
      let self = this;
      self._postBody(
        "index/getSignPackage",
        {
          url: self.url,
          paySource: self.getPlatform(),
        },
        function (res) {
          self.mpMessage(res.data.signPackage);
        }
      );
    },
    /*获取数据*/
    getData() {
      let self = this;
      uni.showLoading({
        title: this.$t('order.loading'),
      });
      let orderProductId = self.orderProductId;
      self._get(
        "user/refund/toApply",
        {
          orderProductId: orderProductId,
          platform: self.getPlatform(),
        },
        function (res) {
          self.product = res.data.Apply;
          self.temlIds = res.data.templateArr;
          if (self.product.orderM.deliveryType == 30) {
            self.type = 30;
          }
          uni.hideLoading();
        }
      );
    },
    /*切换服务类型*/
    tabType(e) {
      this.type = e;
    },

    /*提交表单*/
    formSubmit: function (e) {
      let self = this;
      var formdata = self.form;
      formdata.type = self.type;
      formdata.orderProductId = self.orderProductId;
      formdata.images = self.images;
      let callback = function () {
        uni.showLoading({
          title: self.$t('order.submitting'),
          mask: true,
        });
        self._postBody("user/refund/apply", formdata, function (res) {
          uni.hideLoading();
          uni.showToast({
            title: res.msg,
            duration: 3000,
            complete: function () {
              self.gotoPage("/pages/order/refund/index/index");
            },
          });
        });
      };
      self.subMessage(self.temlIds, callback);
    },

    /*打开上传图片*/
    openUpload() {
      this.isUpload = true;
    },

    /*获取上传的图片*/
    getImgsFunc(e) {
      let self = this;
      self.isUpload = false;
      if (e && typeof e != "undefined") {
        let this_length = self.images.length,
          upload_length = e.length;
        if (this_length + upload_length < 7) {
          self.images = self.images.concat(e);
        } else {
          let leng = 6 - this_length;
          for (let i = 0; i < leng; i++) {
            self.images.push(e[i]);
          }
        }
      }
    },

    /*删除图片*/
    deleteFunc(e) {
      this.images.splice(e, 1);
    },
  },
};
</script>

<style lang="scss">
.bottom-btn {
  position: fixed;
  bottom: 0;
  @include background_color("background_color");
  @include font_color("text_color2");
  border-radius: 10rpx;

  padding-bottom: env(safe-area-inset-bottom);
}

.bottom-btn > button {
  @include background_color("background_color");
  @include font_color("text_color2");
  border: none;
  font-size: 28rpx;
  font-weight: bold;
  display: flexd;
  justify-content: center;
  align-items: center;
}
</style>
